<template>
	<view class="box">
		<view class="nav">
			<image src="../../../static/return.png" class="navback" @click="navback"></image>
			客服
		</view>
		<view class="kefubox">
			<view class="wx">微信号</view>
			<view class="wxnum">
				<text>{{phone}}</text>
				<view class="cop" @click="copy">复制</view>
			</view>
			<view class="add">
				扫码或复制微信号添加客服
			</view>
			<view class="mabox">
				<image :src="url" class="ma" @click="doimg('../../../static/wxma.png')"></image>
			</view>
			<view class="bao">长按保存二维码</view>
			<view class="btnbox">
				<view class="btn" @click="doimg('../../../static/wxma.png')">保存图片</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCopy from '@/js_sdk/uni-copy.js'
	import{vipphone} from"@/api/userInfo.js"
	export default {
		data(){
			return{
				url:"",
				phone:""
			}
		},
		onLoad() {
			this.$post(vipphone).then(res=>{
				this.phone=res.data.service_phone
				this.url=res.data.service_qrcode
				console.log(res)
			})
			
		},
		methods: {
			doimg(url) {
				
				// #ifdef APP-PLUS
				uni.downloadFile({
						url: this.url,
						success: (res) =>{
							console.log("成功",res)
							if (res.statusCode === 200){
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: "保存成功",
											icon: "none"
										});
									},
									fail: function() {
										uni.showToast({
											title: "保存失败，请稍后重试",
											icon: "none"
										});
									}
								});
							}
						},
						fail:(res)=>{
							console.log("失败",res)
						}
					})
				// #endif
				// #ifdef H5
				uni.showToast({
					title:"长按图片即可保存",
					icon:"none"
				})
				// #endif
				
			},
			navback() {
				uni.navigateBack({
					delta: 1
				})
			},
			copy() {
				uniCopy({
					content: this.phone,
					success: (res) => {
						uni.showToast({
							title: '复制成功快去微信添加吧',
							icon: 'none',
							duration: 1500,
							mask: true
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 1500,
							mask: true
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.btnbox {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.btn {
		width: 275rpx;
		height: 65rpx;
		background: linear-gradient(15deg, #FF743E, #FFB966);
		border-radius: 33px;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.bao {
		text-align: center;
		font-size: 18rpx;
		font-weight: 400;
		color: #999999;
		position: relative;
	}

	.mabox {
		text-align: center;
	}

	.ma {
		width: 300rpx;
		height: 300rpx;
	}

	.nav {
		position: absolute;
		top: 60rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #FFFFFF;
		left: 0;
		width: 750rpx;
	}

	.navback {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 30rpx;
		top: 0;
	}

	.add {
		text-align: center;
		font-size: 18rpx;
		font-weight: 400;
		color: #999999;
		position: relative;
		top: -20rpx;
	}

	.wxnum {
		position: relative;
		text-align: center;
		font-size: 44rpx;
		font-weight: 400;
		color: #FC9F56;
		text-align: center;
	}

	.cop {
		position: absolute;
		right: 60rpx;
		top: 22rpx;
		width: 70rpx;
		height: 30rpx;
		background: linear-gradient(15deg, #FF743E, #FFB966);
		border-radius: 15rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 30rpx;

	}

	.wx {
		font-size: 26rpx;
		font-weight: 400;
		color: #444444;
		text-align: center;
	}

	.box {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: url(../../../static/bg.png);
		background-repeat: no-repeat;
		background-size: 750rpx 100vh;
	}

	.kefubox {
		width: 552rpx;
		height: 775rpx;
		background-image: url(../../../static/kefubox.png);
		background-repeat: no-repeat;
		background-size: 552rpx 775rpx;
		padding-top: 83rpx;
	}
</style>
